<template>
  <div :style="{ width, height }"></div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from './mixins/resize'
export default {
  mixins:[resize],
  name: "",
  data(){
    return {
      chart:null
    }
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    chartData:{
      type:Object,
      default:{}
    },
    yTittle:{
      type:String,
      default:''
    }
  },
  mounted() {
    // 第一次创建组件的时候，实例化echarts并且设置option 
    // 第一次的时候没有数据，拿到的数据是空对象
    this.initChart()
  },
  methods:{
    initChart(){
      this.chart = echarts.init(this.$el, "macarons");
      this.setOption(this.chartData)
    },
    setOption({expectedData=[],actualData=[]}){
      this.chart.setOption({
      // 标题
      // title: {
      //   text: "ECharts 入门示例",
      // },
      // 提示
      tooltip: {
        trigger:'axis',
        axisPointer:{
          type:'cross'
        }
      },

      grid:{
        left:20,
        top:30,
        right:20,
        bottom:20,
        containLabel:true
      },

      // 图例
      legend: {
        data: ["期望", "实际"],
      },
      // x轴
      xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        boundaryGap:false  //坐标轴两边留白策略
      },
      // y轴
      yAxis: {
        name:this.yTittle 
      },

      // 系列
      series: [
        {
          name: "期望",
          type: "line",
          data: expectedData,
          itemStyle:{
            color:'red'
          },
          lineStyle:{
            width:4
          }
        },
        {
          name: "实际",
          type: "line",
          data: actualData,
          itemStyle:{
            color:'blue'
          },
          lineStyle:{
            width:4
          },
          areaStyle:{
            color:'hotpink'
          }
        },
      ],
    })
    }
  },
  // 异步数据回来之后第二次去设置option
  watch:{
    chartData(newVal){
      this.setOption(newVal)
    }
  }


};
</script>

<style lang="less" scoped>
</style>
